<template>
	<div class="col-lg-3">
		<div class="ibox">
			<div :id="id" class="ibox-title ibox-content">
				<h5 class="float-left">{{ params.title }}</h5>
				<span v-if="['up', 'down'].includes(params.status) && params.difference" class="label label-danger float-right">{{ params.type }}</span>
				<span v-else class="label label-success float-right">{{ params.type }}</span>
			</div>
			<div class="ibox-content">
				<el-tooltip
					class="item"
					effect="light"
					:content="'低于目标值 ' + params.difference"
					placement="top-end"
					v-if="params.status==='down' && params.difference"
				>
					<h1 class="no-margins text-danger">{{ params.num }}</h1>
				</el-tooltip>
				<el-tooltip
					class="item"
					effect="light"
					:content="'高于目标值 ' + params.difference"
					placement="top-end"
					v-else-if="params.status==='up' && params.difference"
				>
					<h1 class="no-margins text-danger">{{ params.num }}</h1>
				</el-tooltip>
				<h1 class="no-margins text-success" v-else>{{ params.num }}</h1>
				<template v-if="sub">
				<div class="stat-percent font-bold text-danger" v-if="['up', 'down'].includes(params.status) && params.difference">({{sub}})</div>
				<div class="stat-percent font-bold text-success" v-else>({{sub}})</div>
				</template>
				<small data-i18n="body.total_times" class="text-danger" v-if="['up', 'down'].includes(params.status) && params.difference">{{to_sub}}</small>
				<small data-i18n="body.total_times" class="text-success" v-else>{{to_sub}}</small>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'info_label',
	props: {
		params: Object,
		hyper: String,
		search: null,
		search_key: String,
		type: String,
		title: String,
		num: String,
		num1: String,
		status: String,
		sub: String,
		to_sub: String,
		cls: String,
		link: String,
		id: String,
		s: String
	},
	data() {
		return {
		};
	},
	mounted() {},
	methods: {
		search_data: function() {
			if (this.search == 'true') {
				this.$emit('search_data', this.search_key);
			}
		}
	}
};
</script>

<style scoped lang="scss">
@import '../../assets/common/common.scss';

    .text-success {
        color: #409eff;
    }
		h1{
			margin: 0;
		}
    .text-danger{
        color: #ed5565;
    }
    .font-bold {
        font-weight: 600;
    }
    .stat-percent {
        float: right;
    }
</style>
